<template>
  <el-form
    ref="formRef"
    label-width="100px"
    :model="state.formData"
    :rules="state.formRules"
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="目标列:" prop="columnKey" required>
          <el-input v-model="state.formData.columnKey" type="text" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="渲染方式:" prop="type" required>
          <el-radio-group
            v-model="state.formData.type"
            @change="handleTypeChange"
          >
            <el-radio label="人员姓名" value="UserName"></el-radio>
            <el-radio label="部门名称" value="DeptName"></el-radio>
            <el-radio label="表字段值" value="TableColumn"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col v-if="state.formData.type === 'TableColumn'" :span="24">
        <el-form-item label="实体表:" prop="targetTableId">
          <el-input
            v-model="state.formData.targetTableName"
            :disabled="true"
            placeholder="请选择实体表"
          >
            <template #append>
              <el-button icon="Search" @click="handleOpenPicker" />
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col v-if="state.formData.type === 'TableColumn'" :span="24">
        <el-form-item label="来源属性:" prop="targetColumnKey">
          <el-select
            v-model="state.formData.targetColumnKey"
            ref="textColumnRef"
            @change="handleTextColumnChange"
          >
            <el-option
              v-for="(item, index) in columnList"
              :key="index"
              :value="item.columnKey"
              :label="item.columnComment"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <DefTablePicker ref="defTablePickerRef" @change="handleTableChange" />
</template>
<script setup lang="ts">
import DefTablePicker from "@/components/def/defTablePicker.vue";
import type { DefColumn } from "@/views/def/table/DefColumn";
import { queryList } from "@/api/def/columnctrl/";
import { reactive, ref } from "vue";
const formRef = ref(null);
const defTablePickerRef = ref(null);
const columnList = ref<DefColumn[]>([]);
const textColumnRef = ref(null);

const state = reactive({
  formData: {
    columnKey: "",
    type: "",
    targetTableId: "",
    targetTableName: "",
    targetColumnKey: "",
    targetColumnComment: ""
  },
  formRules: {
    columnKey: [{ required: true, message: "目标列不能为空", trigger: "blur" }],
    type: [{ required: true, message: "转换类型不能为空", trigger: "blur" }],
    targetTableId: [
      { required: true, message: "实体表不能为空", trigger: "blur" }
    ]
  }
});

const show = data => {
  if (data) {
    state.formData.columnKey = data.columnKey;
    state.formData.type = data.type;
    state.formData.targetTableId = data.targetTableId;
    state.formData.targetTableName = data.targetTableName;
    state.formData.targetColumnKey = data.targetColumnKey;
    state.formData.targetColumnComment = data.targetColumnComment;
  }
};

const handleOpenPicker = () => {
  defTablePickerRef?.value.show();
};

const queryColumnDataList = () => {
  queryList({
    tableId: state.formData.targetTableId,
    columnShow: true
  }).then(res => {
    if (res.code === 200) {
      columnList.value = res.data;
    }
  });
};

const handleTypeChange = val => {
  if (val === "UserName") {
    state.formData.targetColumnKey = "userName";
  } else if (val === "DeptName") {
    state.formData.targetColumnKey = "deptName";
  } else {
    state.formData.targetColumnKey = "";
  }
};

const handleTableChange = row => {
  state.formData.targetTableId = row.id;
  state.formData.targetTableName = row.tableComment;
  queryColumnDataList();
};

const handleTextColumnChange = val => {
  const index = columnList.value.findIndex(n => n.columnKey === val);
  if (index > -1) {
    state.formData.targetColumnComment = columnList.value[index].columnComment;
  }
};

const getFormData = () => {
  return new Promise((resolve, reject) => {
    formRef.value
      .validate()
      .then(valid => {
        if (valid) {
          resolve(state.formData);
        } else {
          resolve(null);
        }
      })
      .catch(errs => {
        reject(errs);
      });
  });
};

defineExpose({
  getFormData,
  show
});
</script>
